<template>
  <div class="pb-5">
    <a-button @click="goBack" class="mb-4">
      <template #icon>
        <IconArrowLeft /> </template
      >{{ t["返回"] }}
    </a-button>

    <a-card title="" class="mb-4" :bodyStyle="{ height: '300px', overflow: 'auto' }">
      <template #title>
        <h2>{{ t["选择设备"] }}</h2>
      </template>

      <LcdDeviceSelector
        v-model:type="form.type"
        v-model:objects="form.objects"
      ></LcdDeviceSelector>
    </a-card>
    <div>
      <SkinSelector
        cols="grid-cols-4 lg:grid-cols-6"
        v-model="form.skinId"
        :theme-id="form.groupsId"
      />
    </div>

    <div class="text-left mt-4">
      <button :disabled="!form.skinId" @click="send" class="send">{{ t["下发"] }}</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ISendParams, sendBySkin } from "@/api/service/skin";
import { DeviceTypeEnum } from "@/enum/system.enum";
import router from "@/router";

const t = translate("公共模块");
const form = ref<ISendParams>({
  groupsId: "",
  skinId: "",
  type: DeviceTypeEnum.ALL,
  objects: []
});

const route = useRoute();

onMounted(() => {
  const { groupsId } = route.query;
  form.value.groupsId = groupsId as string;
});
const goBack = () => {
  router.go(-1);
};
const send = () => {
  sendBySkin(form.value);
};
</script>

<style lang="scss" scoped>
button.send {
  width: 120px;
  height: 36px;
  background: none;
  border: none;
  outline: none;
  border: 1px solid #9b9b9b;
  cursor: pointer;
  background: var(--primary);
  color: white;
}
button:disabled {
  background: #9b9b9b;
}
</style>
